<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应布局</title>
    <style>
        .main {
            display: flex;
            height: 500px;
            justify-content: space-between;
            /* height可随便更改 */
        }

        .left {
            flex: 2;
            margin-right: 20px;
            display: flex;
         
            flex-direction: column;
            justify-content: space-between;
        }

        .left_top {
            flex: 2;
            background-color: brown;
        }

        .left_bottom {
            flex: 1;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
        }

        .left_bottom_left {
            flex: 1;
            background-color: green;
        }

        .left_bottom_right {
            flex: 1;
            margin-left: 20px;
            background-color: rgb(243, 103, 10);
        }

        .right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .right_top {
            flex: 1;
            margin-bottom: 20px;
            background-color: aqua;
        }

        .right_bottom {
            flex: 2;
            background-color: purple;
        }

        p {
            padding-left: 15px;
        }
    </style>
</head>

<body>
    <div class="main">
        <span class="left">
            <span class="left_top">
                <p>1</p>
            </span>
            <span class="left_bottom">
                <span class="left_bottom_left">
                    <p>3</p>
                </span>
                <span class="left_bottom_right">
                    <p>5</p>
                </span>
            </span>
        </span>
        <span class="right">
            <span class="right_top">
                <p>2</p>
            </span>
            <span class="right_bottom">
                <p>4</p>
            </span>
        </span>
    </div>
</body>

</html>